import { Router, Switch, Route, Redirect } from 'react-router-dom'
// import Login from './pages/Login/Login'
// import NotFound from './pages/NotFound/NotFound'
// import Login from '@/pages/Login/Login'
import { lazy, Suspense } from 'react'
import history from './utils/history'
import PrivateRoute from '@/components/PrivateRoute'
// BrowserRouter as
// import Layout from './pages/Layout/Layout'
const Layout = lazy(() => import('./pages/Layout/Layout'))
const Login = lazy(() => import('./pages/Login/Login'))
const NotFound = lazy(() => import('./pages/NotFound/NotFound'))

// 1. 让vscode 认识@   ----->   jsconfig.json
// 2. 让webpack 认识@  ----->   cra使用的还是webpack，做法是安装一个包craco,通过它来做配置

function App () {
  return (
    <div className="app">
      {/* react路由 */}
      <Router history={history}>
        <Suspense fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }>
          <Switch>
            <Redirect from='/' to="/home" exact></Redirect>
            {/* <Route component={Layout} path='/'></Route> */}

            {/* 匹配到/home之后---判断有token---->渲染Layout组件 */}

            {/* 改造Route的功能，让它在显示组件之前，能有自己的逻辑 */}
            <PrivateRoute component={Layout} path='/home'></PrivateRoute>

            {/* <Route component={Login} path='/login'></Route> */}
            <Route render={() => { return <Login/> }} path='/login'></Route>

            <Route component={NotFound}></Route>
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}

export default App
